import { ColumnProps } from 'antd/lib/table';

import { Tag, Row, Spin, Table, Button } from 'antd';

import React from 'react';
import { Brand } from '@/models/brand';
import { BrandTableContext } from '../index';

const columns: ColumnProps<Brand>[] = [
  {
    title: '编号',
    dataIndex: 'id',
    align: 'center',
  },
  {
    title: '品牌名称',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '品牌首字母',
    dataIndex: 'firstLetter',
    align: 'center',
    render: text => <Tag color="magenta">{text}</Tag>,
  },
  {
    title: '排序',
    dataIndex: 'sort',
    align: 'center',
  },
  {
    title: '相关',
    dataIndex: 'productCount',
    align: 'center',
    render: text => (
      <span>
        商品：<a href="#">{text || '0'}</a>
      </span>
    ),
  },
  {
    title: '操作',
    key: 'actions',
    width: '170px',
    align: 'center',
    render: (_text, record) => (
      <BrandTableContext.Consumer>
        {table => (
          <div className="horizon-button-group">
            <Button onClick={() => table.onRowEdit(record.id)}>编辑</Button>
            <Button type="danger" onClick={() => table.onRowDelete(record.id)}>
              删除
            </Button>
          </div>
        )}
      </BrandTableContext.Consumer>
    ),
  },
];

export interface BrandTableProps {
  brands: Brand[];
  loading?: boolean;
}

export default (props => (
  <Row>
    <Spin spinning={props.loading}>
      <Table<Brand> dataSource={props.brands} columns={columns} rowKey="id" bordered />
    </Spin>
  </Row>
)) as React.FC<BrandTableProps>;
